<template>
	<view class="page">
		<!-- 蓝色头部区域 -->
		<view class="header-container">
			<image
				src="/static/默认头像.png"
				class="profile-img"
			></image>
			<text class="welcome-text">大美汽修厂，欢迎您</text>
		</view>
		
		<!-- 主要操作区域 -->
		<view class="main-actions">
			<view class="action-item" @click="scanCode">
				<image src="/static/扫码.png" class="action-icon"></image>
				<text class="action-text">扫码核销</text>
			</view>
			<view class="divider"></view>
			<view class="action-item" @click="inputCode">
				<image src="/static/输入2.png" class="action-icon"></image>
				<text class="action-text">输入核销码</text>
			</view>
		</view>
		
		<!-- 功能图标网格 -->
		<view class="function-grid">
			<!-- 第一行 -->
			<view class="grid-row">
				<view class="function-item" @click="goToStatistics">
					<view class="icon-circle blue">
						<image src="/static/统计.png" class="function-icon"></image>
					</view>
					<text class="function-text">经营统计</text>
				</view>
				<view class="function-item" @click="goToRecords">
					<view class="icon-circle orange">
						<image src="/static/核销记录 (1).png" class="function-icon"></image>
					</view>
					<text class="function-text">核销记录</text>
				</view>
				<view class="function-item" @click="goToIncome">
					<view class="icon-circle blue">
						<image src="/static/123收支明细.png" class="function-icon"></image>
					</view>
					<text class="function-text">收支明细</text>
				</view>
				<view class="function-item" @click="goToOrders">
					<view class="icon-circle yellow">
						<image src="/static/订单管理.png" class="function-icon"></image>
						<view class="badge">12</view>
					</view>
					<text class="function-text">订单管理</text>
				</view>
			</view>
			
			<!-- 第二行 -->
			<view class="grid-row">
				<view class="function-item" @click="goToCoupons">
					<view class="icon-circle blue">
						<image src="/static/卡券.png" class="function-icon"></image>
					</view>
					<text class="function-text">卡券管理</text>
				</view>
				<view class="function-item" @click="goToMaintenance">
					<view class="icon-circle green">
						<image src="/static/维修.png" class="function-icon"></image>
						<view class="badge">12</view>
					</view>
					<text class="function-text">维修任务</text>
				</view>
				<view class="function-item" @click="goToReviews">
					<view class="icon-circle red">
						<image src="/static/评价管理.png" class="function-icon"></image>
					</view>
					<text class="function-text">评价管理</text>
				</view>
				<view class="function-item" @click="goToProfile">
					<view class="icon-circle blue">
						<image src="/static/资料库.png" class="function-icon"></image>
					</view>
					<text class="function-text">商户资料</text>
				</view>
			</view>
			
			<!-- 第三行 -->
			<view class="grid-row">
				<view class="function-item" @click="goToActivity">
					<view class="icon-circle orange">
						<image src="/static/活动.png" class="function-icon"></image>
					</view>
					<text class="function-text">活动发布</text>
				</view>
			</view>
		</view>
		
		<!-- 最新通知区域 -->
		<view class="notification-section">
			<!-- 通知头部 -->
			<view class="notification-header">
				<view class="header-left">
					<image src="/static/消息-信息.png" class="notification-icon"></image>
					<text class="notification-title">最新通知</text>
				</view>
				<view class="header-right" @click="viewAllTasks">
					<text class="task-count">今日需上门取车任务共{{taskCount}}单</text>
					<image src="/static/收起箭头小.png" class="arrow-icon"></image>
				</view>
			</view>
			
			<!-- 表格头部 -->
			<view class="table-header">
				<text class="header-cell">用户</text>
				<text class="header-cell">服务项目</text>
				<text class="header-cell">时间</text>
			</view>
			
			<!-- 通知列表 -->
			<view class="notification-list">
				<view 
					class="notification-item" 
					v-for="(item, index) in notificationList" 
					:key="index"
					@click="viewDetail(item)"
				>
					<text class="user-name">{{item.userName}}</text>
					<text class="service-item">{{item.serviceItem}}</text>
					<text class="time">{{item.time}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				taskCount: 32,
				notificationList: [
					{
						userName: '张先生',
						serviceItem: '汽车美容、基础保养',
						time: '2022-03-10 11:09'
					},
					{
						userName: '张先生',
						serviceItem: '汽车精细',
						time: '2022-03-10 11:09'
					},
					{
						userName: '张先生',
						serviceItem: '车辆维修-上门取车',
						time: '2022-03-10 11:09'
					},
					{
						userName: '张先生',
						serviceItem: '汽车美容、基础保养',
						time: '2022-03-10 11:09'
					},
					{
						userName: '张先生',
						serviceItem: '车辆维修-到店维修',
						time: '2022-03-10 11:09'
					}
				]
			}
		},
		methods: {
			// 扫码核销
			scanCode() {
				uni.navigateTo({
					url: '/pages/wjq/scancode/scancode'
				});
			},
			// 输入核销码
			inputCode() {
				uni.navigateTo({
					url: '/pages/wjq/enterverificationcode/enterverificationcode'
				});
			},
			// 经营统计
			goToStatistics() {
				uni.navigateTo({
					url: '/index-top/BusinessStatistics/index'
				});
			},
			// 核销记录
			goToRecords() {
				uni.navigateTo({
					url: '/pages/wjq/verificationrecords/verificationrecords'
				});
			},
			// 收支明细
			goToIncome() {
				uni.navigateTo({
					url: '/pages/wjq/income/income'
				});
			},
			// 订单管理
			goToOrders() {
				uni.showToast({
					title: '订单管理',
					icon: 'none'
				});
			},
			// 卡券管理
			goToCoupons() {
				uni.showToast({
					title: '卡券管理',
					icon: 'none'
				});
			},
			// 维修任务
			goToMaintenance() {
				uni.navigateTo({
					url: '/lj/maintenance/maintenance'
				});
			},
			// 评价管理
			goToReviews() {
				uni.showToast({
					title: '评价管理',
					icon: 'none'
				});
			},
			// 商户资料
			goToProfile() {
				uni.showToast({
					title: '商户资料',
					icon: 'none'
				});
			},
			// 活动发布
			goToActivity() {
				uni.navigateTo({
					url: '/pages/wjq/activity/activity'
				});
			},
			// 查看所有任务
			viewAllTasks() {
				uni.showToast({
					title: '查看所有任务',
					icon: 'none'
				});
			},
			// 查看详情
			viewDetail(item) {
				uni.showToast({
					title: `查看${item.userName}的详情`,
					icon: 'none'
				});
			}
		}
	}
</script>

<style>
	.page {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	/* 头部区域 */
	.header-container {
		display: flex;
		align-items: center;
		background-color: #007AFF;
		height: 200rpx;
		padding: 0 30rpx;
		position: relative;
	}
	
	.profile-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		margin-right: 30rpx;
	}
	
	.welcome-text {
		color: white;
		font-size: 32rpx;
		font-weight: bold;
		flex: 1;
	}
	
	.language-icon {
		width: 60rpx;
		height: 60rpx;
		background-color: rgba(255, 255, 255, 0.2);
		border-radius: 8rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.wen-text {
		color: white;
		font-size: 24rpx;
		font-weight: bold;
	}
	
	/* 主要操作区域 */
	.main-actions {
		background-color: white;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
		padding: 40rpx 0;
		display: flex;
		justify-content: space-around;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.action-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}
	
	.action-icon {
		width: 80rpx;
		height: 80rpx;
		margin-bottom: 20rpx;
	}
	
	.action-text {
		font-size: 28rpx;
		color: #333;
		font-weight: 500;
	}
	
	.divider {
		width: 2rpx;
		height: 120rpx;
		background-color: #E5E5E5;
		margin: 0 20rpx;
	}
	
	/* 功能网格 */
	.function-grid {
		background-color: white;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
		padding: 40rpx 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	.grid-row {
		display: flex;
		justify-content: flex-start;
		margin-bottom: 40rpx;
		padding-left: 20rpx;
	}
	
	.grid-row:last-child {
		margin-bottom: 0;
	}
	
	.function-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 25%;
		margin-right: 20rpx;
		position: relative;
	}
	
	.icon-circle {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 20rpx;
		position: relative;
	}
	
	.icon-circle.blue {
		background-color: #007AFF;
	}
	
	.icon-circle.orange {
		background-color: #FF9500;
	}
	
	.icon-circle.yellow {
		background-color: #FFCC00;
	}
	
	.icon-circle.green {
		background-color: #34C759;
	}
	
	.icon-circle.red {
		background-color: #FF3B30;
	}
	
	.function-icon {
		width: 50rpx;
		height: 50rpx;
	}
	
	.function-text {
		font-size: 24rpx;
		color: #333;
		text-align: center;
		line-height: 1.2;
	}
	
	.badge {
		position: absolute;
		top: -10rpx;
		right: 10rpx;
		background-color: #FF3B30;
		color: white;
		font-size: 20rpx;
		padding: 4rpx 8rpx;
		border-radius: 20rpx;
		min-width: 30rpx;
		text-align: center;
		line-height: 1;
	}
	
	/* 最新通知区域 */
	.notification-section {
		background-color: white;
		margin: 20rpx 30rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	}
	
	/* 通知头部 */
	.notification-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f0f0f0;
	}
	
	.header-left {
		display: flex;
		align-items: center;
	}
	
	.notification-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 15rpx;
	}
	
	.notification-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.header-right {
		display: flex;
		align-items: center;
	}
	
	.task-count {
		font-size: 24rpx;
		color: #FF3B30;
		margin-right: 10rpx;
	}
	
	.arrow-icon {
		width: 20rpx;
		height: 20rpx;
	}
	
	/* 表格头部 */
	.table-header {
		display: flex;
		background-color: #f8f8f8;
		padding: 20rpx 0;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
	}
	
	.header-cell {
		font-size: 28rpx;
		font-weight: bold;
		color: #666;
	}
	
	.header-cell:nth-child(1) {
		flex: 1;
		text-align: center;
	}
	
	.header-cell:nth-child(2) {
		flex: 1.5;
		text-align: center;
		padding: 0 10rpx;
	}
	
	.header-cell:nth-child(3) {
		flex: 1.5;
		text-align: center;
	}
	
	/* 通知列表 */
	.notification-list {
		
	}
	
	.notification-item {
		display: flex;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		align-items: center;
	}
	
	.notification-item:last-child {
		border-bottom: none;
	}
	
	.user-name {
		flex: 1;
		text-align: center;
		font-size: 26rpx;
		color: #999;
	}
	
	.service-item {
		flex: 1.5;
		text-align: center;
		font-size: 26rpx;
		color: #999;
		padding: 0 10rpx;
		white-space: nowrap;
	}
	
	.time {
		flex: 1.5;
		text-align: center;
		font-size: 22rpx;
		color: #999;
		white-space: nowrap;
	}
</style>
